<!--
 * @description: 薪资设置
 * @Author: Coder
 * @Date: 2019-12-09 18:55:55
 * @LastEditors: Coder
 -->

<template>
  <div>
    <!-- 整体子路由布局 -->
    <a-layout class="page_set">
      <!-- 子路由侧边栏 -->
      <a-layout-sider width="280" class="a_layout_sider">
        <a-menu :defaultSelectedKeys="defaultSelectedKeys">
          <a-menu-item class="item_title" key="app" disabled>
            薪资设置
          </a-menu-item>
          <a-menu-item @click="goList(i, meta)" class="bot_bot" v-for="({ meta }, i) in menuList" :key="meta.title">{{
            meta.title
          }}</a-menu-item>
        </a-menu>
      </a-layout-sider>
      <!-- 子路由主内容 -->
      <a-layout class="a_layout">
        <router-view />
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
export default {
  name: "WagesSet",

  data() {
    return {
      defaultSelectedKeys: ["计薪设置"],
      meta: {}
    };
  },

  created() {
    this.defaultSelectedKeys[0] = this.$route.name;
  },

  computed: {
    menuList() {
      const men = this.$router.options.routes.find(route => {
        return route.path.includes("/wages");
      });
      return men.children[5].children;
    }
  },
  methods: {
    // 跳转单页
    goList(i, meta) {
      this.$nextTick;
      this.$router.push(this.menuList[i]);
      this.meta = meta;
    }
  }
};
</script>
<style lang="scss" scoped>
.a_layout_sider {
  background: none;
  width: 280px;
  // border-right: 1px solid #f4f4f4;
}
.ant-menu-vertical {
  min-height: 90%;
}
.item_title {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #000 !important;
}
.bot_bot {
  border-bottom: 1px solid #e8e8e8;
}
.a_layout {
  box-sizing: border-box;
  padding: 0 20px;
  background: #fff;
  min-height: calc(100vh - 90px);
}
</style>
